<template>
  <div class="mainul">
    <el-card class="box-card">
      <ul>
        <li
          @click="toview(index)"
          v-for="(item, index) in lists"
          :key="index"
          :class="{ isn: isn === index ? 'isn' : '' }"
        >
          {{ item }}
        </li>
      </ul>
    </el-card>
    <router-view />
  </div>
</template>

<script >
import { defineComponent, reactive, computed, toRaw, watch, ref } from "vue";
import router from "@/router";

import { useStore } from "vuex";
import { useRoute } from "vue-router";

import scroll from "@/utils/scroll";

export default defineComponent({
  components: {},
  props: {
    lists: {
      Array,
      default: () => [],
    },
    isanswer: {
      Boolean,
      default: false,
    },
  },

  //   scroll: {
  //     mounted(el, bin) {
  //       console.log("day");
  //       window.addEventListener("scroll", function () {
  //         let scrollTop =
  //           document.documentElement.scrollTop || document.body.scrollTop;
  //         if (
  //           scrollTop + document.documentElement.clientHeight >=
  //           document.documentElement.scrollHeight
  //         ) {
  //           let loadData = bin.value;
  //           console.log("day");
  //           loadData();
  //         }
  //       });
  //     },
  //   },
  // },
  unmounted: () => {
    //取消监听
    scroll.fn2();
  },
  setup(props) {
    //从vuex里拿到数据
    console.log(router.currentRoute.value.params.id, "当前路由");
    const routers = useRoute();
    console.log(routers.params.id, "当前路由-");
    const store = useStore();
    store.dispatch("main/getcontent");
    const data = toRaw(
      reactive(computed(() => store.state.main.contents).value)
    );
    //文章信息
    const text = computed(() => store.state.main.text).value;
    console.log(data);
    const isn = ref(0 + 0);

    //路由跳转
    const toview = (e) => {
      isn.value = e;
      if (props.isanswer) {
        router.push({ path: `/answer/${e}` });
      } else {
        router.push({ path: `/main/${e}` });
        store.commit("main/changec", e);
      }
    };
    watch(
      () => routers.params.id,
      () => {
        if (routers.params.id == 0) {
          console.log("来到了这z");
          store.dispatch("answer/getanswer");
        } else if (routers.params.id == 1) {
          console.log("来到了这");
          store.dispatch("answer/getdescanswer");
        }
        //发送网络请求 根据 当前路由 地址发送不同 请求
      }
    );
    const pulllist = () => {
      store.dispatch("main/getessay");
    };
    scroll.fn1(pulllist);
    return { data, text, toview, isn };
  },
});
</script>

<style scoped lang="less">
.mainul {
  padding-top: 10px;
  .box-card {
    .el-card__body {
      > ul {
        display: flex;
        margin: 0;
        padding: 0;
        font-size: 16px;
        > li {
          width: 100px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          list-style: none;
          cursor: pointer;
        }
        .isn {
          color: #3389fa;
        }
      }
    }
  }
}
</style>
